<template>
  <div class="title">地震实时热点数据可视化大屏</div>
  <div class="container">
    <div class="left">
      <div>
        <rotateBox>
          <echarts1></echarts1>
        </rotateBox>
      </div>
      <div>
        <rotateBox>
          <echarts2></echarts2>
        </rotateBox>
      </div>
    </div>
    <div class="map home">
      <div class="map" id="mapDom">

      </div>
    </div>
    <div class="right">
      <rotateBox>
        <echarts3></echarts3>
      </rotateBox>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import map from '@/assets/map/index.json'
import mapConfig from '../map'
import { getCoordinatePoint } from '@/api/seismicInformations.js'
import latestTtimeStamp from '@/utlis/latestTtimeStamp.js'
import rotateBox from '@/components/rotateBox.vue'
import echarts1 from '@/view/home/statistics/cpn/echats1.vue'
import echarts2 from '@/view/home/statistics/cpn/echarts2.vue'
import echarts3 from '@/view/home/statistics/cpn/ecahrts3.vue'
let echartsInit = ref(null)
echarts.registerMap('china', map)
const echartsInitFn = () => {
  echartsInit = echarts.init(document.getElementById('mapDom'))
  echartsInit.setOption(mapConfig, true)
}
const mapResize = () => {
  window.onresize = () => {
    echartsInit?.resize()
  }
}
const day_30 = 24 * 60 * 60 * 30 * 1000
const getCoordinatePointFn = timestamp => {
  getCoordinatePoint(timestamp).then(res => {
    if (res.code === 200) {
      const result = mapDataConvert(res.data)
      mapConfig.series.data = result.mapData
      mapConfig.title.subtext = result.cout + '次'
      echartsInitFn()
    }
  })
}
const mapDataConvert = data => {
  const mapData = []
  let cout = 0
  if (data && data.length !== 0) {
    data.forEach(element => {
      if (element.latitude > 3.86 && element.latitude < 53.55 && element.longitude > 73.66 && element.longitude < 135.05) {
        mapData.push({
          name: element.location,
          value: [element.longitude, element.latitude]
        })
        cout++
      }
    })
  }
  return { mapData, cout }
}
onMounted(() => {
  echartsInitFn()
  mapResize()
  getCoordinatePointFn(latestTtimeStamp(day_30))
})
</script>
<style scoped lang="less">
.title {
  background-color: rgb(2, 7, 19);
  width: 100%;
  font-weight: 700;
  color: rgb(41, 220, 222);
  padding: 6px;
  font-size: 18px;
  text-align: center;
}
.container {
  display: flex;
  width: 100%;
  height: 94%;
  background-color: rgb(2, 7, 19);
  .left {
    flex: 1.25;
    display: flex;
    flex-direction: column;
    div {
      flex: 1;
    }
  }
  .map {
    width: 100%;
    height: 100%;
    margin: 0 1px;
    flex: 2;
  }
  .home {
    border: 1px solid rgb(34, 53, 83);
  }
  .right {
    flex: 1.25;
  }
}
</style>